<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>订单明细win</title>
  	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <style>
        html body{background: #fff !important}
        .aui-bar{padding:0.1rem 0rem 0.1rem 0rem;box-sizing:border-box;width: 100%;}
        .aui-pull-left{padding: 0 0.3rem 0 0.5rem}
        .aui-searchbar{height: 1rem;position: static !important;}
        .aui-border-radius{height: 1rem;line-height: 1rem;margin: 0;border-radius:0.2rem;padding-left: 0.2rem;}
        .aui-searchbar-input input{height: 1rem;font-size:0.373rem;display: flex;align-items: center;}
        .aui-searchbar-cancel{height: 1rem;line-height: 1rem;font-size:0.373rem;width: 1.5rem;color: #fff;}
        .iconsousuo1{font-size: 0.48rem !important;line-height: 1rem !important;color:#ff4c41;display: block;padding-right: 0.2rem}
        .iconsousuo1:before {content: "\e602";}
        /*tab分类*/
        .aui-tab .aui-tab-item{height: 1.2rem;line-height: 1.2rem;font-size:0.426rem;color:rgba(255,255,255,0.7);padding-top:0.1rem;}
        .aui-tab-item.aui-active{color: #fff;border: none;font-weight: 700;}
        .aui-active::after{content: "";display: block;margin:-6px auto 0 auto;width:2rem;height: 2px;
          background: #fff;box-sizing: border-box;}
        /*类型*/
        .screenBox{width: 100%;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-around;height: 1.2rem;
          background: #fff;}
        .screenBox .aui-active::after{margin: 0px;width: auto;height: auto;}
        .screenBox span{font-size: 0.426rem;padding-left: 0.1rem;}
        .activeScreen {color:#ff4c41 !important;font-weight: 700;}
        /*找回订单*/
        .orderRetrieval{background: #fdf5f3;height:1rem;color:#ff4c41;display: flex;align-items: center;justify-content: space-between;padding: 0 0.3rem;}
        .orderRetrieval span:nth-child(2){border: 1px solid #ff4c41;padding:0.05rem 0.2rem;border-radius: 0.4rem;}
    </style>
</head>
<body id="wrap">
    <header class="aui-bar aui-bar-nav aui-bar-light sg-color-font1 sg-color-bg2" id="aui-header">
        <a class="aui-pull-left"  tapmode onclick="closeWinFun()">
            <span class="aui-iconfont aui-icon-left sg-text-size36 sg-color-font4"></span>
        </a>
        <div class="aui-title sg-text-size36 sg-color-font4">订单明细</div>
        <a class="aui-pull-right"  tapmode onclick="common_problem()">
            <span class="iconfont iconwenhao sg-text-size36 sg-color-font4"></span>
        </a>
    </header>
    <div class="contentArea">
        <div class="aui-tab sg-color-bg2" id="tab">
            <div class="aui-tab-item aui-active">淘宝天猫</div>
            <div class="aui-tab-item">拼多多</div>
            <div class="aui-tab-item">京东</div>
        </div>
        <div class="screenBox">
            <div class="activeScreen" tapmode onclick="screenFun(0)">全部</div>
            <div tapmode onclick="screenFun(1)">即将到账</div>
            <div tapmode onclick="screenFun(2)">已到账</div>
            <div tapmode onclick="screenFun(3)">无效订单</div>
        </div>
    </div>
    <div class="orderRetrieval sg-text-size28">
        <span>已经下单10分钟了，没有看到订单？</span>
        <span tapmode onclick="findOrderFun()">立即补单</span>
    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var tab = new auiTab({
    element:document.getElementById("tab"),
    index:1,
    repeatClick:false
},function(ret){
    setFrameShow(ret.index - 1);
});
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    var header = $api.byId('aui-header');
    $api.setStorage('PlatformType', 1);
		$api.fixStatusBar(header);
    // 订单找回的处理
    api.addEventListener({
        name: 'findOrderScusse'
    }, function(ret, err){
        if( ret ){
             setFrameShow(ret.value.pf - 1)
             var tab = new auiTab({
                 element:document.getElementById("tab"),
                 index:ret.value.pf,
                 repeatClick:false
             },function(ret){
             });
        }else{
        }
    });
    // 打开当前对应frm组页面
    openFrameGroupFun();
    screenFun(api.pageParam.index)
}

// 打开当前对应frm组页面
function openFrameGroupFun(){
    api.openFrameGroup({
        name: 'myOrder',
        scrollEnabled: true,
        background: '#f5f5f5',
        rect: {
            x: 0,
            y: $api.dom('#aui-header').offsetHeight + $api.dom('.contentArea').offsetHeight + $api.dom('.orderRetrieval').offsetHeight,
            w: 'auto',
            h: 'auto'
        },
        index:api.pageParam.index,
        preload:0,
        frames: [{
            name: 'myOrder1',
            url: './myOrder_frm1.html',
            bgColor: '#fff',
        }, {
            name: 'myOrder2',
            url: './myOrder_frm2.html',
            bgColor: '#fff',
        }, {
            name: 'myOrder3',
            url: './myOrder_frm3.html',
            bgColor: '#fff',
        }, {
            name: 'myOrder4',
            url: './myOrder_frm4.html',
            bgColor: '#fff',
        }]
    }, function(ret, err) {
        var index = ret.index;
        var dom = document.querySelectorAll('.screenBox div');
        for (var i = 0; i < dom.length; i++) {
            $api.removeCls(dom[i], 'activeScreen');
            if (index == i) {
                $api.addCls(dom[i], 'activeScreen');
            }
        }
    });
}

// 点击切换对应的frm页面
function screenFun(type){
    var dom = document.querySelectorAll('.screenBox div');
    for (var i = 0; i < dom.length; i++) {
    		$api.removeCls(dom[i], 'activeScreen');
    		if (type == i) {
    		  	$api.addCls(dom[i], 'activeScreen');
    		}
		}
    api.setFrameGroupIndex({
        name: 'myOrder',
        index: type,
        scroll: true,
        reload:false
    });
}

// 切换选中平台页面标签
function setFrameShow(index){
    // 设置选中平台
    $api.setStorage('PlatformType', index+1);
    api.sendEvent({
        name: 'OrderDataFun',
    });
}
// 查找订单
function findOrderFun(){
    api.openTabLayout({
        name: 'findOrder',
        url: './findOrder_win.html',
        useWKWebView: true,
        bgColor: '#fff',
        allowEdit: true,
    });
}
// 关闭当前页面
function closeWinFun(){
    api.closeWin({});
}
</script>
</html>
